<template>
  <el-container class="home-container">
    <el-header class="home-header">
      <div class="header-title">IoT设备管理系统</div>
      <div class="header-user">
        <el-dropdown @command="handleUserCommand">
          <span class="el-dropdown-link">
            用户菜单<i class="el-icon-arrow-down el-icon--right" aria-hidden="true"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu router :default-active="$route.path">
          <el-menu-item index="/devices">
            <i class="el-icon-monitor" aria-hidden="true"></i>
            <span slot="title">设备管理</span>
          </el-menu-item>
          <el-menu-item index="/device/add">
            <i class="el-icon-plus" aria-hidden="true"></i>
            <span slot="title">添加设备</span>
          </el-menu-item>
          <el-menu-item index="/users">
            <i class="el-icon-user" aria-hidden="true"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="/user/add">
            <i class="el-icon-circle-plus" aria-hidden="true"></i>
            <span slot="title">添加用户</span>
          </el-menu-item>
          <el-menu-item index="/test-connection">
            <i class="el-icon-connection" aria-hidden="true"></i>
            <span slot="title">连接测试</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    async handleUserCommand(command) {
      if (command === 'logout') {
        try {
          // 显示确认对话框
          await this.$confirm('确定要退出登录吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          });
          
          // 处理退出登录逻辑
          localStorage.removeItem('isAuthenticated');
          localStorage.removeItem('token');
          
          // 如果有其他存储的用户相关信息也可以一并清除
          // 例如: localStorage.removeItem('userInfo');
          
          this.$message.success('已退出登录');
          this.$router.push('/login');
        } catch (error) {
          // 用户取消退出操作
          if (error !== 'cancel') {
            // 真正的错误
            this.$message.error('退出登录时发生错误');
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.home-container {
  height: 100vh;
  /* Add vendor prefixes for better cross-browser compatibility */
  width: -webkit-fill-available;
  width: stretch;
}

.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #409EFF;
  color: white;
  padding: 0 20px;
  /* Add vendor prefixes for better cross-browser compatibility */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

.header-title {
  font-size: 20px;
  font-weight: bold;
}

.header-user {
  cursor: pointer;
  /* Add vendor prefixes for better cross-browser compatibility */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

.el-dropdown-link {
  color: white;
  display: flex;
  align-items: center;
  /* Add vendor prefixes for better cross-browser compatibility */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

.el-aside {
  background-color: #f5f5f5;
  /* Add vendor prefixes for better cross-browser compatibility */
  width: -webkit-fill-available;
  width: stretch;
}

.el-menu {
  border-right: none;
  /* Add vendor prefixes for better cross-browser compatibility */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
</style>